<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		 </view>
		<view v-else>
			<view class="c_head" v-if="chapter.s_type==1">
				<!-- <video :src="chapter.s_playUrl" :autoplay="false"></video> -->
				<video :src="chapter.s_playUrl" v-if="isM==1"></video>
				<view v-else class="fufei">该课程为付费课程，请点击下方按钮购买观看</view>
			</view>
			
			<view class="c_cont">
				<view class="cont_name">{{chapter.s_name}}</view>
				<view class="cont_tear">
					<view class="img">
						<image :src="tea.t_icon"></image>
					</view>
					<view class="right">
						<view class='name'>{{tea.t_name}}</view>
						<view class="job">{{tea.t_job}}</view>
					</view>
					<view class='zl'>
						<view @click="onUrl" data-url="/pages/secret/secretView?id=" :data-get="chapter.s_secretId">进入专栏</view>
					</view>
				</view>
				<view class='cont_descript'>
					{{chapter.s_descript}}
				</view>
			</view>
			
			<view class="content" v-if="chapter.s_type==2">
				<rich-text :nodes="chapter.s_content" v-if="isM==1"></rich-text>
				<view v-else class='fufei'>该课程为付费课程，请点击下方按钮购买阅读</view>
			</view>
			
			<view class="btn_hide"></view>
			<view class="btn" v-if="isM==0" @click="onPay">解锁课程 ￥{{view.s_money}}</view>
			<view class="btn bak" v-else>已解锁</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:null,
				show:true,
				chapter:null,
				tea:null,
				view:null,
				isM:0
			}
		},onLoad(e){
			var id=typeof(e.id);
			
			if(id!='undefined'){
				this.id=Number(e.id)
				
				this.onCha();
			}
		},methods:{
			onPay(){
				var token=this.$store.state.Authorization;
				
				if(token){
					uni.navigateTo({
					    url: '/pages/secret/pay?id='+this.view.s_id
					});
				}else{
					this.$refs.uToast.show({
						title: '未登录',
						type:'default'
					});
				}
			},
			onUrl(e){
				var url=e.currentTarget.dataset.url;
				
				var get=e.currentTarget.dataset.get;
				
				uni.navigateTo({
				    url: url+get
				});
			},
			onCha(){
				var that=this;
				
				this.show=true;
				
				this.$request({
					url:'/secret/chapter',
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							
							res.data.data.chapter.s_content = res.data.data.chapter.s_content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
							
							that.chapter=res.data.data.chapter;
							
							that.tea=res.data.data.tea;
							
							that.view=res.data.data.view;
							
							that.isM=res.data.data.isM;
							
							that.show=false;
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.btn_hide{
		height:100rpx;
	}
	.fufei{
		width:100%;
		height:360rpx;
		line-height: 360rpx;
		background-color: #000;
		font-size:30rpx;
		color:#fff;
		text-align: center;
	}
	.content{
		height:auto;
		padding:20rpx 25rpx;
		font-size:30rpx;
		border-top:2rpx solid #F2F2F2;
	}
	.content .fufei{
		background:#fff;
		color:#000;
	}
	.bak{
		background:#F7F7F7;
	}
	.c_head{
		width:750rpx;
		height:360rpx;
	}
	.c_head video{
		width:750rpx;
		height:360rpx;
	}
	.c_cont{
		padding:30rpx 20rpx;
	}
	.c_cont .cont_descript{
		font-size:28rpx;
		color:#888;
		padding:0 10rpx;
	}
	.c_cont .cont_name{
		font-size:36rpx;
		margin-bottom:20rpx;
	}
	.c_cont .cont_tear{
		display:flex;
		margin-bottom:40rpx;
	}
	.c_cont .cont_tear .img{
		width:120rpx;
		height:120rpx;
		overflow: hidden;
		border-radius: 100rpx;
		margin-right:20rpx
	}
	.c_cont .cont_tear .img image{
		width:120rpx;
		height:120rpx;
	}
	.c_cont .cont_tear .right{
		flex:2;
	}
	.c_cont .cont_tear .right .name{
		font-size:32rpx;
		line-height: 60rpx;
	}
	.c_cont .cont_tear .right .job{
		color:#888;
		font-size:26rpx;
		line-height: 60rpx;
	}
	.c_cont .cont_tear .zl{
		width: 136rpx;
		display: flex;
		align-items: center;
	}
	.c_cont .cont_tear .zl view{
		font-size:28rpx;
		color:#fff;
		background-color: #EA4389;
		text-align: center;
		padding:8rpx 10rpx;
	}
	.btn{
		color:#fff;
		background-color: #EA4389;
		width:100%;
		height:100rpx;
		font-size:32rpx;
		position: fixed;
		bottom:0;
		text-align: center;
		line-height: 100rpx;
	}
	.bak{
		background:#ccc;
	}
</style>
